<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<jsp:include page="../../include/top.jsp"/>
<div class="main_body">
    <div class="span9 page_message">
        <section id="contents">
            <ul class="tab-nav nav">
                <li><a href="${BasePath}/order/groupOrder/list?${PublicParams}">团单列表<span class="arrow fa fa-sort-up"></span></a></li>
                <li class="current"><a href="">团单添加/修改<span class="arrow fa fa-sort-up"></span></a></li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab-pane in tab1">
                    <!-- 表单 -->
                    <form class="form-horizontal" name="myForm" id="myForm" action="${BasePath}/order/groupOrder/save" method="post">
                        <input type="hidden" name="id" value="${bean.id }"/>
                        <input type="hidden" name="type" value="${type }"/>
                        <input type="hidden" name="itemId" value="${itemId }"/>

                        <div class="form-item cf toggle-groupName">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                团体名称：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="groupName" name="groupName" type="text" value="${bean.groupName}">
                            </div>
                        </div>
                        <div class="form-item cf toggle-orderFrom">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                团体来源：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <select name="orderFrom" id="orderFrom">
                                    <option value="公司销售" <c:if test="${bean.orderFrom=='公司销售'}">selected</c:if>>公司销售</option>
                                    <option value="代理商"
                                            <c:if test="${bean.orderFrom=='代理商'}">selected</c:if> >代理商
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-item cf toggle-director">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                项目负责人：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="director" name="director" type="text" value="${bean.director }">
                            </div>
                        </div>

                        <div class="form-item cf toggle-companyName">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                公司名：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="companyName" name="companyName" type="text" value="${bean.companyName }">
                            </div>
                        </div>
                        <div class="form-item cf toggle-contactName">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                公司联系人：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="contactName" name="contactName" type="text" value="${bean.contactName }">
                            </div>
                        </div>
                        <div class="form-item cf toggle-address">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                地址：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="address" name="address"
                                       type="text" value="${bean.address }">
                            </div>
                        </div>
                        <div class="form-item cf toggle-phone">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                电话：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="phone" name="phone" type="text" value="${bean.phone }">
                            </div>
                        </div>
                        <div class="form-item cf toggle-mobile">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                手机：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="mobile" name="mobile" type="text" value="${bean.mobile }">
                            </div>
                        </div>
                        <div class="form-item cf toggle-email">
                            <label class="item-label">
                                Email：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="email" name="email" type="text" value="${bean.email }">
                            </div>
                        </div>
                        <div class="form-item cf toggle-startDate">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                有效日期：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input type="text" class="Wdate" id="startTime" name="startTime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endTime\')}',readOnly:'false'})"/>
                                至
                                <input type="text" class="Wdate" id="endTime" name="endTime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'startTime\')}',readOnly:'false'})"/>
                            </div>
                        </div>
                        <div class="form-item cf toggle-productKeyword">
                            <label class="item-label">
                                产品关键字：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <input class="input-xlarge focused" id="productKeyword" name="productKeyword" type="text" value="${bean.productKeyword }">
                            </div>
                        </div>
                        <div class="form-item cf toggle-idInstitution">
                            <label class="item-label">
                                <span class="need_flag">*</span>
                                可选套餐：
                                <span class="check-tips"></span>
                            </label>

                            <div class="controls">
                                <table>
                                    <tr>
                                        <td width="40%" valign="top">
                                            <select id="institutionId" name="institutionId" onchange="getProduct()" style="width:200px;">
                                                <option value="-1">请选择合作商家</option>
                                                <c:forEach items="${institutionList}" var="inst">
                                                    <option value="${inst.id}">${inst.name}</option>
                                                </c:forEach>
                                            </select>
                                            <select id="productId" name="productId" size="10" style="width: 200px;">
                                            </select>
                                        </td>
                                        <td width="10%" valign="middle" align="center">
                                            <input type="button" value="增加" onclick="addPro()">
                                            <br/>
                                            <input type="button" value="删除" onclick="delPro()">
                                        </td>
                                        <td width="50%" valign="top">
                                            <select id="selectedProducts" name="selectedProducts" multiple="multiple" size="10" style="width: 250px;">
                                                <c:forEach items="${selectedProducts}" var="p">
                                                    <option value="${p.idProduct}">${p.productName}-${p.institutionName}</option>
                                                </c:forEach>
                                            </select>
                                            <input type="hidden" name="selectedProuctIds" id="selectedProuctIds" value=""/>
                                            <span style="color: red"> 已选的套餐!</span>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                        </div>
                        <button class="btn submit-btn" id="submit" type="button" onclick="submitForm()"/>
                        确 定
                        </button>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>
<jsp:include page="../../include/bottom.jsp"/>
<script language="javascript">
    $(function () {
        setByIdFormatDate("startTime", '${bean.startDate}');
        setByIdFormatDate("endTime", '${bean.endDate}');
    });
    function submitForm() {
        var groupName = $("#groupName").val();
        if (groupName.trim() == "") {
            layer.msg('团体名称不能为空!', {icon: 5});
            return false;
        }
        var director = $("#director").val();
        if (director == "") {
            layer.msg('项目负责人不能为空!', {icon: 5});
            return false;
        }
        var companyName = $("#companyName").val();
        if (companyName == "") {
            layer.msg('公司名不能为空!', {icon: 5});
            return false;
        }
        var contactName = $("#contactName").val();
        if (contactName == "") {
            layer.msg('公司联系人不能为空!', {icon: 5});
            return false;
        }
        var address = $("#address").val();
        if (address == "") {
            layer.msg('地址不能为空!', {icon: 5});
            return false;
        }
        var phone = $("#phone").val();
        var mobile = $("#mobile").val();
        if (phone == "" && mobile == "") {
            layer.msg('请填写联系电话!', {icon: 5});
            return false;
        }
        var startTime = $("#startTime").val();
        if (startTime == "") {
            layer.msg('有效日期不能为空!', {icon: 5});
            return false;
        }
        var endTime = $("#endTime").val();
        if (endTime == "") {
            layer.msg('有效日期不能为空!', {icon: 5});
            return false;
        }
        var countOption = 0;
        var productIds="";
        $('#selectedProducts option').each(function () {
            countOption++;
            productIds=productIds+this.value + ",";
        });
        var keyword = $("#productKeyword").val();
        if (countOption == 0 && keyword == "") {
            layer.msg('请选择套餐!', {icon: 5});
            return false;
        }
        $("#selectedProuctIds").val(productIds);
        $("#")
        var salePrice = $("#salePrice").val();
        if (salePrice == "") {
            layer.msg('付款金额不能为空!', {icon: 5});
            return false;
        }

        $('#myForm').ajaxSubmit(function (data) {
            if (data.errno == 1) {
                updateAlert(data.errdesc, 'alert-error');
            } else {
                updateAlert("操作成功！", 'alert-success');
                window.location.href = "${BasePath}/order/groupOrder/list?${PublicParams}";
            }
        });
    }


    var groupOrderId = "${bean.id}";
    if (groupOrderId != "") {
        $.getJSON("${BasePath}/order/product/getJSON", {groupOrderId: groupOrderId}, function (data) {
            $.each(data.data, function (InfoIndex, Info) {
                $("#selectedProducts").append('<option value=' + Info.id + '>' + Info.institutionName + "-" + Info.name + '</option>');
            });
        });
    }
    function getProduct() {
        var val = $("#institutionId").val();
        $("#productId option").remove();
        if (val == "-1") {
            return;
        }
        $.getJSON("${BasePath}/order/product/getJSON", {institutionId: val}, function (data) {
            $.each(data.data, function (InfoIndex, Info) {
                $("#productId").append('<option value=' + Info.id + '>' + Info.name + '</option>');
            });
        });
    }
    function addPro() {
        var pro = document.getElementById("productId");
        var spro = document.getElementById("selectedProducts");

        if (pro.value != -1 && pro.value != "") {
            for (var i = 0; i < spro.options.length; i++) {
                if (spro.options[i].value == pro.value) {
                    return;
                }
            }
            var option = document.createElement("option");
            spro.options.add(option);
            var insti = document.getElementById("institutionId");
            option.value = pro.value;
            option.innerHTML = pro.options[pro.selectedIndex].text + "-" + insti.options[insti.selectedIndex].text;

        }
    }
    function delPro() {
        var spro = document.getElementById("selectedProducts");
        var oOptions = spro.options;
        for (var i = oOptions.length - 1; i >= 0; i--) {
            if (oOptions[i].selected) spro.remove(i);
        }
    }
    function selectAll() {
        var spro = document.getElementById("selectedProducts");
        var oOptions = spro.options;
        for (var i = oOptions.length - 1; i >= 0; i--) {
            oOptions[i].selected = true;
        }
    }
</script>